<template>
	<!-- 粉丝详情页 -->
	<view class="fanDetails">
		<view v-if="isFlourEmpty01">
			<!-- 名片 -->
			<view class="marginA">
				<callingcard :userObj="userObjs"></callingcard>
			</view>
		
			<!-- 标签栏 -->
			<view class="labelBox">
				<mylabel :labelData="labelLists"></mylabel>
			</view>
		
			<!--Ta的动态 -->
			<view class="privilege label marginA">
				<view class="privilege_label"></view>
				<view class="privilege_title">Ta的动态</view>
				<view class="privilege_image_">
					<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
				</view>
			</view>
			<view v-if="flowLists.length != 0" class="falls">
				<fallsshop @updataShow="updataShow" :loadStatus="loadStatux"
					:isUserId="userObjs.userId" :flowList="flowLists"></fallsshop>
			</view>
			<empty v-else title="暂无动态"></empty>
		</view>
		<empty v-else title="暂无匹配面粉"></empty>
	</view>
</template>

<script>
	import callingcard from "../../../components/callingcard/callingcard.vue"
	import fallsshop from "../../../components/falls/fallsshop.vue"
	import empty from "../../../components/defaultpage/empty.vue"
	import network from "../../../components/defaultpage/network.vue"
	export default {
		data() {
			return {
				// activeStyleBut:,
				// activeStyleBar:,
				isCircle:true,
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				isPuper: false,
				userObjs: {},
				list: [{
					name: '面粉'
				}, {
					name: '广场'
				}, ],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadStatux: 'loadmore',
				flowLists: [],
				lists: [],
				menuButtonInfo: {
					top: 25
				},
				squareLists: [],
				pageNum: 1,
				fansNum: 1,
				dynamicNum: 1,
				pageSize: 5,
				isTrue: true,
				isnetworkType: true,
				isClear: 0,
				labelLists: [],
				isDynamic: false,
				pageName: '面粉',
				isFlourEmpty01: false,
		        imgs: "",
				fansId: ''
			}
		},
		components: {
			callingcard,
			
			fallsshop,
			
			empty,
			network
		},
		onLoad(params) {
			// debugger
			this.fansId = params.fansId
		
				this.initFans();
		
			
		},
		// scroll-view到底部加载更多
		onReachBottom() {
	// debugger
				this.loadStatux = 'loading';
				// 数据加载
				this.dynamicNum++;
				setTimeout(() => {
					this.initFansDynamic();
					this.loadStatux = 'loadmore';
				}, 1000)
		
		
		
			
		},
		
		watch: {
		
			// isFlourEmpty01_fallsshop
			flowLists(newer, older) {
				if (newer.length == 0) {
					this.isFlourEmpty01_fallsshop = false;
				} else {
					this.isFlourEmpty01_fallsshop = true;
				}
			},
		},
		
		methods: {
			updataShow(data){
				this.isShow = data;
			},
			// 请求用户动态数据列表
			initFansDynamic() {
				// /amianfrontend/dynamic/list/{userId}
				let req = {};
				req.pageNum = this.dynamicNum;
				req.pageSize = this.pageSize;
			
				this.$apis.dynamicListId({
					data: req,
					id: this.userObjs.userId
				}).then(res => {
					if (res.code == 200) {
			
						if (res.rows.length != 0) {
			
							res.rows.forEach(item => {
								this.flowLists.push({
									page: '/pages/flour/flourdetails/flourdetails',
									image: item.imageList[0],
									imageList: item.imageList,
									activityId: item.activityId,
									dynamicId: item.dynamicId,
									// name: item.
								})
							})
							console.log("this.flowLists请求后的", this.flowLists);
			                if(res.rows.length < this.pageSize){
							this.isTrue = false;
							this.loadStatux = 'nomore';
						}
							// debugger
						} else {
							this.isTrue = false;
							this.loadStatux = 'nomore';
						}
			
			
			
					}
				})
			},
			// 获取粉丝标签列表
			fanslabelList() {
				this.$apis.fansLabelList({
					id: this.userObjs.userId
				}).then(res => {
					if (res.code == 200) {
						if (res.data.length != 0) {
							this.labelLists = this.initPro(res.data);
						} else {
							this.labelLists = []
						}
					}
				});
			},
			// 标签格式数据
			initPro(data) {
				let lArr = [];
				let labelArr = [];
				let nextArr = [];
				let Length = 19;
				data.forEach((newItem, index) => {
			
			
			
					if (newItem.userLabelId != 0) {
						// console.log(newIndex)
						lArr.push(newItem.label)
			            let newlArr = lArr.join('').split('');
						let len = 0;
						newlArr.forEach((item,index)=>{
							let isTest = /^[\u4e00-\u9fa5]+$/;
							if(isTest.test(item)){
								len = len + 2;
							}else{
								len++;
							}
						})
			
			
			
			
						if (len > Length) {
							let nextArr01 = lArr.pop();
							nextArr = JSON.parse(JSON.stringify(lArr));
							lArr = [];
							labelArr.push({
								liNum: 0,
								lis: nextArr
							});
							lArr.push(nextArr01);
							// debugger
							console.log("大于的", lArr);
							if (index + 1 == data.length) {
								// debugger
								nextArr = JSON.parse(JSON.stringify(lArr));
								lArr = [];
								labelArr.push({
									liNum: 0,
									lis: nextArr
								});
							}
			
						} else {
							if (index + 1 == data.length) {
								// debugger
								nextArr = JSON.parse(JSON.stringify(lArr));
								lArr = [];
								labelArr.push({
									liNum: 0,
									lis: nextArr
								});
							}
						}
						console.log("labelArr===>", labelArr)
			
			
			
					} else if (index + 1 == data.length) {
						// debugger
						// debugger
						if (lArr.length != 0) {
							nextArr = JSON.parse(JSON.stringify(lArr));
			
							lArr = [];
							labelArr.push({
								liNum: 0,
								lis: nextArr
							});
						}
					}
			
				});
			
				let maxSum = labelArr.length % 2 == 0 ? (labelArr.length / 2 + 1) : (labelArr.length + 1) / 2;
				// let newLists = [];
				labelArr.forEach((item, index) => {
					let newIndex = index + 1;
					if (maxSum == newIndex) {
						item.liNum = 0;
					} else if (newIndex > maxSum) {
						item.liNum = 2 * (newIndex - maxSum);
					} else if (newIndex < maxSum) {
						item.liNum = 2 * (maxSum - newIndex) - 1;
					}
			
				})
				return labelArr;
				// console.log('labelArr',labelArr);
			},
			
			initFans() {

			  
					this.pageNum = 1;
				    this.$apis.fansInfo({id:this.fansId}).then(res=>{
						// debugger
						if(res.code == 200){
							this.userObjs = res.data;
							this.isFlourEmpty01 = true;
							console.log("this.userObjs===>",this.userObjs)
							this.initFansDynamic();
							this.fanslabelList();
						}else {
								this.isFlourEmpty01 = false;
							}
					})
				
				    
			},
			
		}
			
	}
</script>

<style lang="scss">
	.fanDetails{
		min-height: 100vh;
		// padding-top: 400rpx;
		box-sizing: border-box;
		.marginA {
			margin: 0rpx 40rpx 0px;
		}
		.labelBox{
			padding: 0 40rpx;
			box-sizing: border-box;
		}
		.privilege {
			width: 670rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			position: relative;
		}
		
		.privilege_image {
			display: inline-block;
			vertical-align: top;
		}
		
		.privilege_image image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 22rpx;
		}
		
		.privilege_title {
			display: inline-block;
			color: #2d3034;
			font-size: 34rpx;
			font-weight: 700;
			vertical-align: top;
		}
		
		.privilege_image_ {
			display: inline-block;
			vertical-align: top;
			position: absolute;
			top: 5rpx;
			right: 0;
		}
		
		.privilege_image_ image {
			width: 32rpx;
			height: 32rpx;
		}
		
		.label {
			// margin-top: 60rpx;
			display: flex;
			align-items: center;
		}
		
		.privilege_label {
			display: inline-block;
			width: 8rpx;
			height: 34rpx;
			background: #f10200;
			margin-right: 14rpx;
		}
		
	}
</style>
